/*
 * @Author: 空1 1765027130@qq.com
 * @Date: 2025-02-08 13:56:59
 * @LastEditors: 空1 1765027130@qq.com
 * @LastEditTime: 2025-03-18 16:21:27
 * @FilePath: \rh_home\public\assets\js\backend\dashboard.js
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
define(['jquery', 'bootstrap', 'backend', 'addtabs', 'table', 'echarts', 'echarts-theme', 'template', 'echarts-map-china'], function ($, undefined, Backend, Datatable, Table, Echarts, undefined, Template, EchartsMapChina) {

    var Controller = {
        index: function () {            
            var myMapChart = Echarts.init(document.getElementById('map'));

            // 自定义每个省份的颜色
            // var provinceColors = {
            //     '广东': '#5470C6',
            //     '北京': '#91CC75',
            //     '上海': '#EE6666',
            //     '浙江': '#FAC858',
            //     '江苏': '#73C0DE',
            //     '内蒙古': '#000000',
            //     '辽宁': '#000000',
            //     // 其他省份颜色...
            // };
            
            let provinceColors ={}
            Config.mapList.forEach(item => {
                provinceColors[item.name] = item.color

            });
            // 地图数据
            // list
            // var data = [
            //     { name: '广东', value: 100, color: '#5470C6' },
            //     { name: '北京', value: 200, color: '#5470C6' },
            //     { name: '上海', value: 150, color: '#5470C6' },
            //     { name: '浙江', value: 300, color: '#5470C6' },
            //     { name: '江苏', value: 250, color: '#5470C6' },
            //     { name: '内蒙古', value: 550, color: '#5470C6' },
            //     { name: '辽宁', value: 5510 , color: '#5470C6'},
            //     // 其他省份数据...
            // ];
            var data = Config.mapList;
            // console.log(data)
            // 将数据与颜色结合
            var formattedData = data.map(function (item) {
                return {
                    name: item.name,
                    value: item.value,
                    itemStyle: {
                        color: provinceColors[item.name] || '#5470c6' // 默认颜色
                    }
                };
            });

            // ECharts 配置项
            var mapOption = {
                // title: {
                //     text: '省份地区数据统计',
                //     left: 'center'
                // },
                tooltip: {
                    trigger: 'item',
                    formatter: function (params) {
                        return `<div>${params.name}</div>
                           <div>门店数 : ${(params.value || '暂无数据')}</div>`
                    }
                },
                // visualMap: {
                //     min: 0,
                //     max: 300,
                //     left: 'left',
                //     top: 'bottom',
                //     text: ['高', '低'], // 文本，默认为数值文本
                //     calculable: true,
                //     inRange: {
                //         color: ['#e0ffff', '#006edd'] // 颜色范围
                //     }
                // },
                series: [
                    {
                        name: '数据',
                        type: 'map',
                        mapType: 'china',
                        roam: true, // 是否允许缩放和拖动
                        label: {
                            show: true // 显示省份名称
                        },
                        data: formattedData
                    }
                ]
            };
            // 使用配置项显示地图
            myMapChart.setOption(mapOption);
            //订单
            var myOrderChart = Echarts.init(document.getElementById('order'));
            var orderOption = {

                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: ['商品订单', '服务订单', '卡项订单'],
                    bottom: 0,
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '10%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    // data: ['02-02', '02-03', '02-04', '02-05', '02-06', '02-07', '02-08']
                    data: Config.column

                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        name: '商品订单',
                        type: 'line',
                        // data: [120, 132, 101, 134, 90, 230, 210],
                        data: Config.orderdata,
                        itemStyle: {
                            color: '#dcab83'
                        }
                    },
                    {
                        name: '服务订单',
                        type: 'line',
                        // data: [300, 500, 400, 450, 474, 480, 410],
                        data: Config.orderdata2,
                        itemStyle: {
                            color: '#e8cd8c'
                        }
                    },
                    {
                        name: '卡项订单',
                        type: 'line',
                        // data: [400, 600, 430, 480, 500, 550, 650],
                        data: Config.orderdata3,
                        itemStyle: {
                            color: '#da7a5f'
                        }
                    },

                ]
            };
            myOrderChart.setOption(orderOption);
            //销售
            var mySaleChart = Echarts.init(document.getElementById('sale'));
            var saleOption = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                legend: {
                    data: ['商品金额', '服务金额', '卡项金额'],
                    bottom: 0 // 放置在底部
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '10%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    //data: ['02-02', '02-03', '02-04', '02-05', '02-06', '02-07', '02-08'],
                    data: Config.column,
                    axisLabel: {
                        interval: 0, // 强制显示所有标签
                        rotate: 30  // 旋转标签，防止过长
                    }
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        name: '商品金额',
                        type: 'bar',
                        // data: [120, 132, 101, 134, 90, 230, 210],
                        data: Config.order_sdata,
                        itemStyle: {
                            color: '#2478f2'
                        }
                    },
                    {
                        name: '服务金额',
                        type: 'bar',
                        // data: [220, 182, 191, 234, 290, 330, 310],
                        data: Config.order_sdata2,
                        itemStyle: {
                            color: '#84b7f9'
                        }
                    },
                    {
                        name: '卡项金额',
                        type: 'bar',
                        //data: [150, 232, 201, 154, 190, 330, 410],
                        data: Config.order_sdata3,
                        itemStyle: {
                            color: '#5f9cf8'
                        }
                    }
                ]
            };
            mySaleChart.setOption(saleOption);
            //用户会员
            var myUserChart = Echarts.init(document.getElementById('user'));
            var userOption = {
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: ['访客数', '新增会员', '下单数'],
                    bottom: 0 // 放置在底部
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '10%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    //data: ['02-02', '02-03', '02-04', '02-05', '02-06', '02-07', '02-08'],
                    data: Config.column,
                    axisLabel: {
                        interval: 0, // 强制显示所有标签
                        rotate: 30  // 旋转标签，防止过长
                    }
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        name: '访客数',
                        type: 'line',
                        smooth: true,
                        //data: [820, 932, 901, 934, 1290, 1330, 1320],
                        data: Config.orderdata5,
                        itemStyle: {
                            color: '#6aae6d' // 自定义颜色
                        },
                        areaStyle: {
                            color: '#deedde' // 背景色
                        }
                    },
                    {
                        name: '新增会员',
                        type: 'line',
                        smooth: true,
                        // data: [620, 732, 701, 734, 1090, 1130, 1120],
                        data: Config.userdata,
                        itemStyle: {
                            color: '#9cd1d8' // 自定义颜色
                        },
                        areaStyle: {
                            color: '#e1f1f3' // 背景色
                        }
                    },
                    {
                        name: '下单数',
                        type: 'line',
                        smooth: true,
                        //data: [450, 632, 501, 634, 890, 930, 920],
                        data: Config.orderdata4,
                        itemStyle: {
                            color: '#84abf1' // 自定义颜色
                        },
                        areaStyle: {
                            color: '#dce7fb' // 背景色
                        }
                    }
                ]
            };
            myUserChart.setOption(userOption);



            $(document).on("click", ".btn-refresh", function () {
                setTimeout(function () {
                    myChart.resize();
                }, 0);
            });

        }
    };

    return Controller;
});
